<template>
<!--  <div class="app-container">-->
  <el-dialog :title="title" :visible.sync="visible" width="1300px" append-to-body  >
    <el-form ref="goodsInventoryAddForm" :model="goodsInventoryAddForm" :rules="goodsInventoryAddFormRule"
             label-width="100px" >
      <h3 style="width: 100%;">盘点单</h3>
      <el-row>
        <el-col :span="8">
          <el-form-item label="盘点编号" prop="sn">
            <el-input v-model="goodsInventoryAddForm.sn" disabled ></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点时间" prop="inventory_time">
            <el-date-picker  v-model="goodsInventoryAddForm.inventoryTime" value-format="yyyy-MM-dd" type="date" style="width: 100%"
                             disabled   placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点人" prop="inventoryPerson">
            <el-input v-model="goodsInventoryAddForm.inventoryPerson" placeholder="请选择盘点人" disabled>
              <!--              <el-button slot="append" @click="handleUserSelect" icon="el-icon-search"  v-if="!disabled"></el-button>-->
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="盘点范围" prop="inventoryRange"  >
            <el-input v-model="goodsInventoryAddForm.inventoryRange" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点方法" prop="inventoryMethod"  >
            <el-input v-model="goodsInventoryAddForm.inventoryMethod" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点类型" prop="inventoryType" >
            <el-input v-model="goodsInventoryAddForm.inventoryType" :disabled="true" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="盘点状态" prop="status">
            <!--            <el-input v-model="goodsInventoryAddForm.status" disabled></el-input>-->
            <el-select v-model="goodsInventoryAddForm.status" placeholder="请选择盘点状态" disabled clearable>
              <el-option label="未盘点" value="0"></el-option>
              <el-option label="盘点中" value="1"></el-option>
              <el-option label="已提交" value="2"></el-option>
              <el-option label="已处理" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row v-if="goodsInventoryAddForm.inventoryRange =='物料分类'">
        <el-col :span="24">
          <el-form-item label="物料分类" prop="itemTypeNameRange"  >
            <el-input v-model="goodsInventoryAddForm.itemTypeNameRange" disabled ></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row  v-if="goodsInventoryAddForm.inventoryRange =='仓库'">
        <el-col :span="8">
          <el-form-item label="仓库" prop="warehouseId">
            <el-input v-model="goodsInventoryAddForm.warehouseName" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="库区" prop="locationName">
            <el-input v-model="goodsInventoryAddForm.locationName" disabled ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="库位" prop="areaName">
            <el-input v-model="goodsInventoryAddForm.areaName" disabled ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="inventoryDesc">
            <el-input v-model="goodsInventoryAddForm.inventoryDesc" disabled type="textarea" placeholder="请输入备注"  maxlength="250"/>
          </el-form-item>
        </el-col>
      </el-row>



      <el-divider content-position="center">盘点清单</el-divider>
      <el-card shadow="always" class="box-card">
        <el-form-item style="width: 100%;" class="aa">
          <el-table :data="goodsInventoryAddForm.productList" border :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 20px;" height="600px">
            <el-table-column label="序号"
              type="index"
              width="50">
            </el-table-column>
            <el-table-column label="商品编号" align="center" prop="itemCode"></el-table-column>
            <el-table-column label="商品名称" align="center" prop="itemName"></el-table-column>
            <el-table-column label="规格型号" align="center" prop="specification"></el-table-column>
            <el-table-column label="单位" align="center" prop="unitOfMeasure"></el-table-column>
            <el-table-column label="批次号" align="center" prop="batchCode"></el-table-column>
            <el-table-column label="品牌" align="center" prop="itemBrand"></el-table-column>
            <el-table-column label="颜色" align="center" prop="itemColor"></el-table-column>
            <el-table-column label="技术要求" align="center" prop="itemTechReq"></el-table-column>
            <el-table-column label="型号" align="center" prop="itemModel"></el-table-column>
            <el-table-column label="仓库" align="center" prop="warehouseName"></el-table-column>
            <el-table-column label="库区" align="center" prop="locationName"></el-table-column>
            <el-table-column label="库位" align="center" prop="areaName" width="90"></el-table-column>
            <el-table-column label="库存数量" align="center" prop="quantityOnhand"></el-table-column>
            <el-table-column label="盘点数量" align="center" prop="inventoryNum">
            </el-table-column>
            <el-table-column label="差异" align="center" prop="diffNum">
            </el-table-column>
            <el-table-column
              v-for="col in columnsConfig"
              :key="col.prop"
              :label="col.label"
              :prop="col.prop"
              :width="col.width"
              :align="col.align"
              v-if="col.show">
            </el-table-column>
<!--            <el-table-column label="分类名称" align="center" prop="itemTypeName">
              <template slot-scope="scope">
                {{ scope.row.itemTypeName }}
              </template>
            </el-table-column>-->
            <el-table-column label="备注" align="center" prop="remark">
            </el-table-column>
          </el-table>
        </el-form-item>
<!--      </div>-->
      </el-card>
    </el-form>

    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
<!--      <el-button type="primary" v-if="goodsInventoryAddForm.status !== '已提交'" @click="submitGoodsInventoryAddForm">确认提交</el-button>-->
      <el-button type="primary" @click="cancel">返 回</el-button>
    </div>

    <UserSingleSelect ref="userSelect" @onSelected="onUserSelected"></UserSingleSelect>
<!--  </div>-->
  </el-dialog>
</template>

<script>


import {getTreeList} from "@/api/mes/wm/warehouse";

import {addPandian, getPandian, updatePandian,updatePandianStatus} from "@/api/mes/wm/pandian";
import UserSingleSelect from "@/components/userSelect/single.vue"
import {genCode} from "@/api/system/autocode/rule";
import {getProductByPId} from "@/api/mes/wm/pandianproduct";
import Template from "@/views/print/printtemplate/list.vue";
import {getColumnsConfigKey} from "@/api/system/columnsconfig";
export default {
  name: 'goodsInventoryAdd',
  components: {Template, UserSingleSelect},
  props:{
    title:'',
  },
  data() {
    return {
      columnsConfig:[],
      warehouseList:[],
      locationList:[],
      areaList:[],
      visible:false,
      disabled:true,
      //自动生成编码
      autoGenFlag:false,
      warehouseInfo:[],
      warehouseOptions:[],
      warehouseProps:{
        multiple: false,
        value: 'pId',
        label: 'pName',
      },
      adminList: [],
      dialogVisible: false,
      // warehouseList: [],
      deptList: [],
      deptListAll: [],
      id: '',
      type: '',
      /** 出库单表单*/
      goodsInventoryAddForm: {
        productList: []
      },
      /** 校验规则 */
      goodsInventoryAddFormRule: {
        // inventory_person_id: { required: true, message: '请选择盘点人', trigger: 'change' },
        warehouseInfo: { required: true, message: '请选择报仓库', trigger: 'change' },

      },
      warehouseProduct: null
    };
  },
  created() {
  /*  //获取修改按钮带过来的id
    const pandianId = this.$route.query.id
    //将id赋值
    this.goodsInventoryAddForm.id  = pandianId;
    //查询
    if (pandianId){
      this.getList(pandianId);
    }*/

  },
  methods: {
    init(id){
      this.warehouseInfo=[]
      this.visible=true
      this.goodsInventoryAddForm.id  = id;
      this.getList(id)
      this.getItemBase()
    },
    getItemBase(){
      getColumnsConfigKey('MdItem_Base').then(res=>{
        this.columnsConfig = JSON.parse(res.data);
      })
    },
    /** 查询修改 */
    getList(pandianId) {
      //查询详情
      getPandian(pandianId).then(response => {
        this.goodsInventoryAddForm=response.data
        this.getWarehouseList();
        this.$forceUpdate()

        //加载物料
        getProductByPId(this.goodsInventoryAddForm.id).then(response => {
          this.goodsInventoryAddForm.productList=response.data
          // console.log("productList",this.goodsInventoryAddForm.productList)

        });
      });
      this.$forceUpdate()
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag){
      if(autoGenFlag){
        genCode('PANDIAN_CODE').then(response =>{
          this.goodsInventoryAddForm.sn = response;
          this.$forceUpdate()
        });
      }else{
        this.goodsInventoryAddForm.sn = null;
        this.$forceUpdate()
      }
      this.$forceUpdate()
    },
    //点击人员选择按钮
    handleUserSelect(){
      this.$refs.userSelect.showFlag = true;
    },
    //人员选择返回
    onUserSelected(row){
      this.goodsInventoryAddForm.inventoryPerson= row.userName;
      this.goodsInventoryAddForm.inventoryPersonId= row.userId;
      this.$forceUpdate()
    },

    // 取消按钮
    cancel() {
      this.visible = false;
      this.$emit('refreshDataList')
     /* localStorage.setItem("IndexRefresh", true);
      // 调用全局挂载的方法，关闭当前页
      this.$store.dispatch("tagsView/delView", this.$route)
      this.$router.go(-1)*/
    },
    //商品差
    handleEdit(index, row) {
      if( row.inventoryNum){
        // row.diffNum = parseFloat(Number(row.inventoryNum)-Number(row.quantityOnhand)).toFixed(2)
        row.diffNum = Number(row.inventoryNum) - Number(row.quantityOnhand)
        console.log(row.diffNum)
      }
    },
    // 选择出库单
     handleSelectWarehouseEntryBatch() {

      if (!this.goodsInventoryAddForm.warehouseId) {
        this.$message.error('请先选择仓库！')
        return
      }

      this.$refs.itemSelect.showFlag = true;

    },
    //物料选择弹出框
    onItemSelected(obj){
      debugger;
      console.log("ppppp",obj)
      if(this.goodsInventoryAddForm.productList.length >0){
        this.goodsInventoryAddForm.productList=this.goodsInventoryAddForm.productList.concat(obj)
      }else {
        this.goodsInventoryAddForm.productList=obj
      }

    },
    //选择默认的仓库、库区、库位
    handleWarehouseChanged(obj){
      console.log("handleWarehouseChanged",obj)
      const selectedNodes = this.$refs.selectck.getCheckedNodes();
      console.log("selectedNodes",selectedNodes)
      console.log('选中的名称11:',selectedNodes[0].pathLabels)
      if(obj !=null){
        this.goodsInventoryAddForm.warehouseId = obj[0];
        this.goodsInventoryAddForm.locationId = obj[1];
        this.goodsInventoryAddForm.areaId = obj[2];
        this.goodsInventoryAddForm.warehouseName=selectedNodes[0].pathLabels[0]
        this.goodsInventoryAddForm.locationName=selectedNodes[0].pathLabels[1]
        this.goodsInventoryAddForm.areaName=selectedNodes[0].pathLabels[2]
      }
    },
    getWarehouseList(){
      getTreeList().then( response =>{
        if(response.data){
          this.warehouseOptions = response.data.filter((el) =>{
            return el.warehouseCode.indexOf('VIR') == -1;
          });;
        }
        console.log("1111",this.warehouseOptions)
        this.warehouseOptions.map(w =>{
          w.children.map(l =>{
            let lstr =JSON.stringify(l.children).replace(/locationId/g,'lId').replace(/areaId/g, 'pId').replace(/areaName/g,'pName');
            l.children = JSON.parse(lstr);
          });

          let wstr = JSON.stringify(w.children).replace(/warehouseId/g,'wId').replace(/locationId/g, 'pId').replace(/locationName/g,'pName');
          w.children =  JSON.parse(wstr);

        });
        let ostr=JSON.stringify(this.warehouseOptions).replace(/warehouseId/g,'pId').replace(/warehouseName/g, 'pName');
        this.warehouseOptions = JSON.parse(ostr);
        console.log('2222',JSON.parse(ostr))
      });
    },
  }


}
</script>
<style type="text/css" scoped>
.mx{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  .button {
    margin-left: 10px;
  }
}
.aa >>> .el-form-item__content {
  margin-left:0px !important;
}
</style>

<!--
<style type="text/css" scoped>
.mx{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  .button {
    margin-left: 10px;
  }
}

/** 底部步骤 */
.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
}

.mx {
  display: flex;
  align-items: center;
  width: 100%;

  .button {
    margin-left: 10px;
  }

}
.prolist {
  width: 100%;
  display: flex;
  /deep/ {
    .el-form&#45;&#45;inline .el-form-item__content {
      display: flex;
    }
  }
}

/*.change-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 900px;

  .change-form-item {
    width: 100%;
    margin: 0 10px 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /deep/ {
    .el-form-item__content {
      flex: 1;
      width: 100%;
    }

    .el-date-editor,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }
}*/

.bg-in-stock {
  background-color: #fff;
  margin: 10px;
  padding: 25px;
}

.goods-info {
  display: flex;

  .goods-name-box {
    text-align: left;

    .goods-name {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 16px;
    }

    .specs {
      color: #999999;
    }
  }
}

/deep/ {
  .el-input&#45;&#45;suffix .el-input__inner {
    padding-right: 10px;
  }

  .error-input {
    .el-input__inner {
      border: 1px solid red;
    }
  }
}
</style>
-->
